<template>
	<div class="pay">
		<h3>待支付:<span style="color: red;">￥60</span></h3>
		<div class="div1">
			<template>
			  <el-table
			    :data="order.items"
			    border
			    style="width: 100%;margin: 0 auto;">
			    <el-table-column label="图片" >
			     <template slot-scope="scope">
			    		<el-image
			    		      style="width: 80px; height: 60px"
			    		      :src="`${$ip}/api/public/showimg/${scope.row.book.pic}`">
			    		</el-image>
			      </template>
			    </el-table-column>
			   <el-table-column
			     prop="book.name"
			     label="商品描述"
			     >
			   </el-table-column>
			   <el-table-column
			     prop="price"
			     label="商品价钱"
			     >
			   </el-table-column>
			   <el-table-column
			     prop="num"
			     label="数量"
			    >
			   </el-table-column>
			   <el-table-column
			     prop="sum"
			     label="总金额"
			     >
			   </el-table-column>
			  </el-table>
			</template>
			<div class="div2">
				<table>
					<tr>
						<td>订单号:</td>
						<td>9</td>
					</tr>
					<tr>
						<td>订单总额:</td>
						<td>￥60</td>
					</tr>
					<tr>
						<td>姓名:</td>
						<td>卖家Tom</td>
					</tr>
					<tr>
						<td>电话:</td>
						<td>13509961607</td>
					</tr>
					<tr>
						<td>地址:</td>
						<td>管线</td>
					</tr>
					<tr>
						<td>付款状态:</td>
						<td><button class="btn1" v-show="bool == true" @click="dialogVisible = true">未支付</button>
						    <button class="btn2" v-show="bool != true">已支付</button>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<el-dialog
	   title="支付"
	   :visible.sync="dialogVisible"
	   width="20%" center
	   >
	   <img src="../../assets/img/pc/2993ac4240767771e0ba18cf3363739a1346da5629ee1-mFleCK_fw658.webp.jpg"/>
	   <span slot="footer" class="dialog-footer">
	     <el-button @click="dialogVisible = false">取 消</el-button>
	     <el-button type="primary"  @click="add()">确 定</el-button>
	   </span>
	 </el-dialog>
	</div>
	 
</template>

<script>
	export default{
		name:'Pay',
		data() {
			return{
				 dialogVisible: false,
				order:{},
				bool:true,
			}
		},
		methods:{
			add(){
				this.dialogVisible = false;
				this.$postkv('/api/fore/ord/addPay/'+this.$route.query.id).then((resp)=>{
					if(resp.data.code == 200){
						this.bool = false;
						this.$message({
							message:resp.data.msg,
							type:'success'
						})
					}else{
						this.$message({
							message:resp.data.msg,
							type:'error'
						})
					}
				})
			}
		},
		computed:{
			
		},
		mounted() {
			console.log(this.$route.query.id);
			this.$get('/api/fore/ord/findByOrdid/'+this.$route.query.id).then((resp)=>{
				console.log(resp.data.data)
				this.order = resp.data.data;
				this.order.items.forEach((item)=>{
					item.sum = item.price*item.num;
				})
			})
		}
	}
</script>

<style scoped>
	.pay{
		width: 80%;
		margin: 50px auto;
	}
	.div1{
		width: 100%;
		border: 1px solid gainsboro;
	}
	.div2{
		display: flex;
	}
	table {
		width: 30%;
		margin-left: 20px;
	}
	table tr{
		
		height: 35px;
	}
	table tr td:first-child{
		font-weight: 900;
	}
		
	.btn1{
		width: 100px;
		height: 30px;
		color: white;
		background-color: #f56c6c;
		border: none;
		border-radius: 5px;
		
	}
	.btn2{
		width: 100px;
		height: 30px;
		color: white;
		background-color: #67c23a;
		border: none;
		border-radius: 5px;
	}
	.el-dialog img{
		display: block;
		box-shadow: 2px 2px 2px 2px;
		width: 200px;
		height: 300px;
		margin: 0 auto;
	}
	
</style>